<template>
  <div class="mod-user">
    <el-form :inline="true" :model="formData" label-width="100px">
      <el-form-item label="充电桩编号">
        <el-input @change="searchChange" v-model="formData.code" placeholder="充电桩编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="外壳编号">
        <el-input @change="searchChange" v-model="formData.shellId" placeholder="外壳编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="片区名称">
        <el-input @change="searchChange" v-model="formData.chargingGroupName" placeholder="片区名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="SIM卡ID">
        <el-input v-model="formData.iccid" placeholder="SIM卡ID" clearable></el-input>
      </el-form-item>
      <el-form-item label="合伙人姓名">
        <el-input @change="searchChange" v-model="formData.partnerName" placeholder="合伙人姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="合伙人手机号">
        <el-input @change="searchChange" v-model="formData.partnerMobile" placeholder="合伙人手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-select v-model="formData.enableFlag" @change="searchChange" clearable>
          <el-option key="1" label="未启用" value="0"></el-option>
          <el-option key="2" label="启用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="formData.createDate" @change="searchChange" value-format="yyyy-MM-dd" type="daterange"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formData.status" @change="searchChange" clearable>
          <el-option v-for="(item, index) in statusList" :key="index" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="安装状态">
        <el-select v-model="formData.type" @change="searchChange" clearable>
          <el-option v-for="(item, index) in installOptions" :key="index" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.stop="searchChange">搜索</el-button>
        <el-button type="primary" :loading="exportLoading" @click.stop="exportExcel">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="sumary-list">
      <div>充电桩数量：{{ chargingCount }}</div>
      <div>在线充电桩数量：{{ onlineChargingCount }}</div>
      <div>离线充电桩数量：{{ offlineChargingCount }}</div>
      <div>断电充电桩数量：{{ powerCutChargingCount }}</div>
    </div>
    <avue-crud ref="crud" :page="page" :data="dataList" :table-loading="dataListLoading" :option="tableOption"
      @size-change="sizeChange" @current-change="currentChange">
      <template slot-scope="scope" slot="info">
        <div class="cell">
          <div>充电桩编号：<span>{{ scope.row.code }}</span></div>
          <div>外壳条码ID：<span>{{ scope.row.shellId }}</span></div>
          <div>SIM卡ID：<span>{{ scope.row.iccid }}</span></div>
          <div>类型：<span>{{ scope.row.chargingTypeName }}</span></div>
          <div>信号强度：<span>{{ scope.row.qos }}</span></div>
          <div>创建时间：<span>{{ scope.row.createDate }}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="pileCondition">
        <div class="cell">
          <div>最后使用日期：<span>{{ scope.row.lastUseTime }}</span></div>
<!--          <div>未使用天数：<span>{{ scope.row.daysNoUse }}</span></div>-->
          <div>上线时间：<span>{{ scope.row.onlineDate }}</span></div>
          <div>下线时间：<span>{{ scope.row.offlineDate }}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="auditInfo">
        <div class="cell">
          <div>合伙人姓名：<span>{{ scope.row.partnerName }}</span></div>
          <div>合伙人手机号码：<span>{{ scope.row.partnerMobile }}</span></div>
          <div>片区编号：<span>{{ scope.row.chargingGroupId }}</span></div>
          <div>片区名称：<span>{{ scope.row.chargingGroupName }}</span></div>
          <div>所属运营商：<span>{{ scope.row.merchantName }}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="manageInfo">
        <div class="cell">
          <div>今日分佣金额：<span>{{ scope.row.todayDivideAmount }}</span></div>
          <div>今日分佣订单数量：<span>{{ scope.row.todayDivideCount }}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="socketInfo">
        <div class="cell">
          <div>空闲中：<span>{{ scope.row.expireSocketCount }}</span></div>
          <div>充电中：<span>{{ scope.row.chargingSocketCount }}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="receiverInfo">
        <div class="cell">
          <div>收货人姓名：<span>{{ scope.row.receiver }}</span></div>
          <div>收货人手机号：<span>{{ scope.row.receiverMobile }}</span></div>
          <div>申请原因：<span>{{ scope.row.reason }}</span></div>
          <div>收货地址：<span>{{ scope.row.address }}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="chargeMode">
        <div class="cell">
          <div>计费方式：<span>{{ scope.row.billingMethod }}</span></div>
          <div>计费规则：<span>{{ scope.row.chargingRule }}</span></div>
          <div>收费方式：<span>{{ scope.row.chargingMethod }}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="refundInfo">
        <div class="cell">
          <div>是否退过款：<span>{{ scope.row.isRefund == 0 ? '否' : '是' }}</span></div>
          <div>订单实际支付金额：<span>{{ scope.row.actualAmount }}</span></div>
          <div>退款金额：<span>{{ scope.row.refundAmount }}</span></div>
          <div>退款原因：<span>{{ scope.row.refundReason }}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="operation">
        <div class="list_btn">
          <div class="editbtn" @click="moveIn(scope)" v-if="scope.row.partnerMobile && !scope.row.chargingGroupId">移入站点
          </div>
          <div class="editbtnno" @click="$message({ message: '设备已绑定站点', type: 'warning' })"
            v-else-if="scope.row.partnerMobile">移入站点</div>
          <div class="editbtnno" @click="$message('设备未发货')" v-else-if="!scope.row.partnerMobile">移入站点</div>

          <div class="editbtn" @click="remove(scope)"
            v-if="scope.row.partnerMobile && scope.row.chargingGroupId && scope.row.chargingSocketCount == 0">移出站点</div>
          <div class="editbtnno" @click="$message({ message: '该设备正在使用中,请稍后移出', type: 'warning' })"
            v-else-if="scope.row.partnerMobile && scope.row.chargingGroupId && scope.row.chargingSocketCount > 0">移出站点
          </div>
          <div class="editbtnno" @click="$message('设备未安装')" v-else>移出站点</div>

          <div class="editbtn" @click="recovery(scope)" v-if="scope.row.partnerMobile && !scope.row.chargingGroupId">
            设备回收</div>
          <div class="editbtnno" @click="$message({ message: '请先将设备移出站点', type: 'warning' })"
            v-else-if="scope.row.partnerMobile && scope.row.chargingGroupId">设备回收</div>
          <div class="editbtnno" @click="$message('设备未安装')" v-else>设备回收</div>

          <div class="editbtn" @click="setUp(scope.row.id)">参数设置</div>
          <div class="editbtn" @click="lookUp(scope)">查看</div>
          <div class="editbtn" @click="generateQRcode(scope.row)">生成二维码</div>
        </div>
      </template>
    </avue-crud>

    <!-- 移入站点 -->
    <el-dialog width="65%" :visible.sync="dialogmove" top="10vh" :close-on-click-modal="false">
      <div class="dialogmove_header">
        <div class="dialogmove_list">
          充电桩编号：{{ facilitydata.code }}
        </div>
        <div class="dialogmove_list">
          外壳条形码ID：{{ facilitydata.shellId }}
        </div>
        <div class="dialogmove_list">
          SIM卡ID：{{ facilitydata.iccid }}
        </div>
        <div class="dialogmove_list">
          类型：{{ facilitydata.chargingTypeName }}
        </div>
        <div class="dialogmove_list">
          所属运营商：{{ facilitydata.merchantName }}
        </div>
        <div class="dialogmove_list">
          所属站点类型：{{ facilitydata.deviceType == 0 ? '电动自行车' : facilitydata.deviceType == 1 ? '充电汽车' :
            facilitydata.deviceType == 2 ? '租电' : facilitydata.deviceType == 3 ? '充电宝' : '' }}
        </div>
        <div class="dialogmove_list">
          创建时间：{{ facilitydata.createDate }}
        </div>
        <div class="dialogmove_list">
          信号强度：{{ facilitydata.qos }}
        </div>
        <div class="dialogmove_list">
          合伙人姓名：{{ facilitydata.partnerName }}
        </div>
        <div class="dialogmove_list">
          合伙人手机号码：{{ facilitydata.partnerMobile }}
        </div>
      </div>
      <div class="search">
        片区名称 <el-input class="ipt" v-model="areaName" placeholder="请输入片区名称"></el-input><el-button class="btn"
          type="primary">搜索</el-button>
      </div>
      <el-table ref="multipleTable" height="400" :data="tableData" v-loading="tableloading" border tooltip-effect="dark"
        style="width: 100%" highlight-current-row @current-change="handleSelectionChange">
        <el-table-column width="55">
          <template slot-scope="scope">
            <el-checkbox :value="scope.row.checked"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="片区编号" width="100">
        </el-table-column>
        <el-table-column prop="name" label="片区名称" width="200">
        </el-table-column>
        <el-table-column prop="regionName" label="所在地区" width="120">
        </el-table-column>
        <el-table-column prop="address" label="详细地址" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:center;margin-top:10px;" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page.sync="pages.currentPage" :page-size="pages.pageSize"
        :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="pages.total">
      </el-pagination>
      <div class="dialogmove_btn">
        <el-button type="primary" @click="confirm">确认</el-button>
        <el-button type="info" @click="dialogmove = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog width="65%" :visible.sync="dialoglookUp">
      <div class="dialogmove_header">
        <div class="dialogmove_list">
          充电桩编号：{{ lookdata.code }}
        </div>
        <div class="dialogmove_list">
          外壳条形码ID：{{ lookdata.shellId }}
        </div>
        <div class="dialogmove_list">
          SIM卡ID：{{ lookdata.iccid }}
        </div>
        <div class="dialogmove_list">
          类型：{{ lookdata.chargingTypeName }}
        </div>
        <div class="dialogmove_list">
          所属运营商：{{ lookdata.merchantName }}
        </div>
        <div class="dialogmove_list">
          所属站点类型：{{ lookdata.deviceType == 0 ? '电动自行车' : lookdata.deviceType == 1 ? '充电汽车' : lookdata.deviceType == 2 ?
            '租电' : lookdata.deviceType == 3 ? '充电宝' : '' }}
        </div>
        <div class="dialogmove_list">
          信号强度：{{ lookdata.qos }}
        </div>
        <div class="dialogmove_list">
          创建时间：{{ lookdata.createDate }}
        </div>
      </div>
      <el-table :data="tableDatasee" height="400" border style="width: 100%">
        <el-table-column width="200" prop="operationTime" label="操作时间">
        </el-table-column>
        <el-table-column prop="operationMethod" width="150" label="操作方式">
        </el-table-column>
        <el-table-column prop="operationBy" width="150" label="操作人">
        </el-table-column>
        <el-table-column prop="type" label="添加信息">
          <template slot-scope="scope" v-if="scope.row.type == 1">
            <div>站点编号：{{ scope.row.chargingGroupId }}</div>
            <div>站点名称：{{ scope.row.chargingGroupName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="移除信息">
          <template slot-scope="scope" v-if="scope.row.type == 0 || scope.row.type == 2">
            <div>站点编号：{{ scope.row.chargingGroupId }}</div>
            <div>站点名称：{{ scope.row.chargingGroupName }}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:center;margin-top:10px;" @size-change="handleSizeChangesee"
        @current-change="handleCurrentChangesee" :current-page.sync="pagess.currentPage" :page-size="pagess.pageSize"
        :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="pagess.total">
      </el-pagination>
    </el-dialog>
    <!-- 参数设置  -->
    <el-dialog :title="dialogTitle" width="35%" :visible.sync="dialogSetUp">
      <div class="form-container">
        <el-form :model="setData" label-width="200px">
          <el-form-item label="充电桩编号">
            <el-input v-model="setData.code" :disabled="true" clearable style="width: 200px;">></el-input>
          </el-form-item>
          <el-form-item label="空载功率(单位:w)">
            <el-input v-model="setData.clp" clearable style="width: 200px;">></el-input>
          </el-form-item>
          <el-form-item label="最大功率(单位:w)">
            <el-input v-model="setData.maxPower" clearable style="width: 200px;">></el-input>
          </el-form-item>
          <el-form-item label="空载时长(单位:s)">
            <el-input v-model="setData.plt" clearable style="width: 200px;">></el-input>
          </el-form-item>
          <el-form-item label="最低工作温度">
            <el-input v-model="minWorkingTemp" :disabled="true" style="width: 200px;">></el-input>
          </el-form-item>
          <el-form-item label="最高工作温度">
            <el-input v-model="maxWorkingTemp" :disabled="true" style="width: 200px;">></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editSetUp">确认</el-button>
            <el-button type="info" @click="dialogSetUp = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { tableOption } from '@/crud/pile/mechantPileList'
import { exportExcelCb } from '@/utils/index'
export default {
  data() {
    return {
      dataList: [],
      dialogTitle: '参数设置',
      dataListLoading: false,
      minWorkingTemp: "-25℃",
      maxWorkingTemp: "55℃",
      tableloading: true,
      exportLoading: false,
      tableOption: tableOption,
      formData: {
        code: '',
        shellId: '',
        chargingGroupName: '',
        partnerName: '',
        partnerMobile: '',
        status: '',
        createDate: '',
        type: '',
        deviceType: 0
      },
      statusList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '在线',
          value: 1
        },
        {
          label: '断网离线',
          value: 0
        },
        {
          label: '断电离线',
          value: 2
        }
      ],
      installOptions: [
        {
          label: '已安装',
          value: '1'
        },
        {
          label: '未安装',
          value: '2'
        },
        {
          label: '已发货',
          value: '3'
        },
        {
          label: '未发货',
          value: '4'
        }
      ],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      // 片区
      pages: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      // 查看
      pagess: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      options: [],
      chargingCount: 0,
      offlineChargingCount: 0,
      onlineChargingCount: 0,
      powerCutChargingCount: 0,

      dialogmove: false,
      facilitydata: {},
      lookdata: {},
      areaName: '',
      tableData: [],
      dialoglookUp: false,
      dialogSetUp: false,
      setData: {
        clp: '',
        maxPower: '',
        plt: ''
      },
      tableDatasee: [],
      pid: '',  // 选择片区的id
    }
  },

  mounted() {
    this.getDataList(null, this.formData)
  },

  methods: {
    generateQRcode(val) {
      console.log("val", val)
      this.$router.push({
        name: 'generateQRcode',
        query: val
      })
    },
    handleSizeChange(val) {
      this.pages.pageSize = val
      this.getsiteList(this.facilitydata.id)
    },
    handleCurrentChange(val) {
      this.pages.currentPage = val
      this.getsiteList(this.facilitydata.id)
    },
    handleSizeChangesee(val) {
      this.pagess.pageSize = val
      this.getlookupinfo(this.lookdata.id)
    },
    handleCurrentChangesee(val) {
      this.pagess.currentPage = val
      this.getlookupinfo(this.lookdata.id)
    },
    // 获取数据列表
    getDataList(page, params) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/v1/charging/list'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize
            },
            params
          )
        )
      }).then(({ data }) => {
        this.dataList = data.data.chargingListIPage.records
        this.page.total = data.data.chargingListIPage.total
        this.chargingCount = data.data.chargingCount
        this.offlineChargingCount = data.data.offlineChargingCount
        this.onlineChargingCount = data.data.onlineChargingCount
        this.powerCutChargingCount = data.data.powerCutChargingCount
        this.dataListLoading = false
      })
    },

    // 条件查询
    searchChange() {
      if (this.formData.createDate && this.formData.createDate.length > 0) {
        this.formData.startTime = this.formData.createDate[0]
        this.formData.endTime = this.formData.createDate[1]
      }
      else {
        this.formData.startTime = ''
        this.formData.endTime = ''
      }
      this.page.currentPage = 1
      this.getDataList(this.page, this.formData)
    },
    // 条件查询
    searchChanges() {
      if (this.formData.createDate && this.formData.createDate.length > 0) {
        this.formData.startTime = this.formData.createDate[0]
        this.formData.endTime = this.formData.createDate[1]
      }
      else {
        this.formData.startTime = ''
        this.formData.endTime = ''
      }
      this.getDataList(this.page, this.formData)
    },

    /**
     * 刷新回调
     */
    refreshChange() {
      this.dialogmove = false
      this.getDataList(this.page)
    },

    lookOrUpdate(row, type) {
      this.$router.push({
        name: type == 1 ? 'pileInfo' : 'updatePileInfo',
        query: {
          id: row.id
        }
      })
    },
    //发货
    deliver(row) {
      this.$router.push({
        name: 'deliverPile',
        query: {
          id: row.id
        }
      })
    },

    // 查看物流
    lookExpress(row, type) {
      this.showCheckExpress = true
      this.$nextTick(() => {
        this.$refs['checkExpress'].init(row, type)
      })
    },

    sizeChange(val) {
      this.page.pageSize = val
      this.getDataList(this.page, this.formData)
    },
    currentChange(val) {
      this.page.currentPage = val
      this.getDataList(this.page, this.formData)
    },


    // 移入站点
    moveIn(e) {
      console.log(e, "阿三打火锅")
      this.facilitydata = e.row
      this.getsiteList(e.row.id)
      this.dialogmove = true
    },
    // 获取站点列表
    getsiteList(id) {
      this.tableloading = true
      this.$http({
        url: this.$http.adornUrl('/v1/charging/get/charging/group/by/charging/id'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              current: this.pages.currentPage,
              size: this.pages.pageSize,
              id: id
            },
          )
        )
      }).then(res => {
        console.log(res.data.data.list.records, "片区列表")
        res.data.data.list.records.forEach(e => {
          e.checked = false
        })
        this.tableData = res.data.data.list.records
        this.pages.total = res.data.data.list.total
        this.tableloading = false
      })
    },
    // 选择站点
    handleSelectionChange(val) {
      console.log(val, "选择的站点")
      if (!val) {
        return
      }
      this.tableData.forEach(item => {
        if (item.id == val.id) {
          item.checked = true
          this.pid = val.id
        } else if (item.id != val.id) {
          item.checked = false
        }
      })
      console.log(this.tableData, '站点')
    },
    confirm() {
      if (!this.pid) {
        this.$message({ message: '请先选择站点', type: 'warning' })
        return
      }
      let arr = []
      arr.push(this.facilitydata.id)
      this.$http({
        url: this.$http.adornUrl('/v1/charging/move/in/charging/group'),
        method: 'POST',
        data: this.$http.adornData({
          id: this.pid,
          chargingIds: arr
        })
      }).then(res => {
        this.$message({
          message: '移入成功',
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.dialogmove = false
            this.pid = ''
            this.searchChanges()
          }
        })
      })
    },

    // 移出站点
    remove(e) {
      console.log(e)
      this.$confirm(`确定移出站点?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/v1/charging/move/out/charging/group'),
          method: 'POST',
          data: this.$http.adornData({
            id: e.row.id
          })
        }).then(res => {
          this.$message({
            message: '移出成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.searchChanges()
            }
          })
        })
      }).catch(() => {

      })
    },
    // 设备回收
    recovery(e) {
      console.log(e)
      this.$confirm(`确定进行收回操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/v1/charging/recovery'),
          method: 'POST',
          data: this.$http.adornData({
            id: e.row.id
          })
        }).then(res => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.searchChanges()
            }
          })
        })
      }).catch(() => {

      })
    },
    // 查看
    lookUp(e) {
      console.log(e)
      this.dialoglookUp = true
      this.lookdata = e.row
      this.getlookupinfo(e.row.id)
    },
    // 获取查看信息(操作日志)
    getlookupinfo(id) {
      this.$http({
        url: this.$http.adornUrl('/v1/charging/operation/log'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              current: this.pagess.currentPage,
              size: this.pagess.pageSize,
              chargingId: id
            },
          )
        )
      }).then(res => {
        console.log(res.data.data.records)
        this.tableDatasee = res.data.data.records
        this.pagess.total = res.data.data.total
      })
    },
    // 获取参数设置
    setUp(id) {
      this.dialogSetUp = true
      this.$http({
        url: this.$http.adornUrl('/v1/charging/get/charging/params'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              id: id
            },
          )
        )
      }).then(res => {
        console.log(res.data.data)
        this.setData = res.data.data
      })
    },

    // 参数设置
    editSetUp() {
      this.dialogTitle = '编辑参数'; // 更新标题
      console.log("参数设置", this.setData)
      this.$confirm(`确定提交修改?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/v1/charging/update/charging/params'),
          method: 'POST',
          data: this.setData
        }).then(res => {
          this.$message({
            message: '编辑成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.dialogSetUp = false
            }
          })
        })
      }).catch(() => {
      })
    },
    exportExcel() {
      this.exportLoading = true
      this.$http({
        url: this.$http.adornUrl('/v1/charging/export'),
        method: 'get',
        params: this.$http.adornParams(this.formData),
        responseType: 'blob'
      }).then(({ data }) => {
        console.log(data)
        exportExcelCb(data, '电动自行车充电桩列表.xls')
      }).catch(err => { console.log(err) }).finally(() => {
        this.exportLoading = false
      })
    },
  }

}
</script>

<style lang="scss" scoped>
.cell {
  text-align: left;
}

.el-input {
  width: 100%;
}

.menu-list {
  margin-bottom: 10px;
}

.item {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  div {
    margin-right: 10px;
  }
}

.sumary-list {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 15px;

  div {
    height: 30px;
    padding: 0px 12px;
    line-height: 30px;
    border: solid 1px #009FF1;
    border-radius: 15px;
    margin-right: 10px;
  }

  div:hover {
    color: white;
    background-color: #009FF1;
  }
}

.list_btn {
  .editbtn {
    color: #009FF1;
  }

  .editbtn:hover {
    cursor: pointer;
  }

  .editbtnno {
    cursor: pointer;
    color: gray;
  }
}

.dialogmove_header {
  display: flex;
  flex-wrap: wrap;

  .dialogmove_list {
    margin-right: 80px;
    margin-bottom: 20px;
  }
}

.search {
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  .ipt {
    width: 200px;
    margin-left: 20px;
  }

  .btn {
    margin-left: 20px;
    padding: 8px 20px;
  }
}

.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65%;
}

.dialogmove_btn {
  margin-top: 20px;

  button {
    padding: 8px 20px;
  }
}
</style>
